<template>
    <div>
        <div class="tab-content">
            <div class="grab-time">上次抓取时间: <span>{{ lastGrabTime }}</span></div>
            <div class="grab-status">上次抓取状态: <span>{{ lastGrabStatus }}</span></div>
        </div>
        <div>
            <el-form :inline="true" :model="formInline" ref="cfgForm">
                <el-form-item label="定时抓取间隔:" prop="grabInterval" :rules="[
                    { required: true, message: '不能为空', trigger: 'blur' },
                    { pattern: /\d+/, message: '必须为数字', trigger: 'blur' }
                ]">
                    <el-input v-model="formInline.grabInterval" style="width:80px;"></el-input>
                    <span style="margin-right:5px; ">分钟</span>
                </el-form-item>
                <el-form-item label="启用抓取:">
                    <el-switch v-model="formInline.enable" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="handleAdd" style="margin-bottom:10px;">新增</el-button>
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="headerStyleEvent">
            <el-table-column prop="dbType" label="数据库类型" align="center" width="100"></el-table-column>
            <el-table-column prop="dbIP" label="数据库IP或电脑名" align="center" width="160"></el-table-column>
            <el-table-column prop="dbPort" label="数据库端口(通常为空)" align="center" width="160"></el-table-column>
            <el-table-column prop="instanceName" label="实例名" align="center"></el-table-column>
            <el-table-column prop="dbName" label="数据库名" align="center"></el-table-column>
            <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
            <el-table-column label="密码" align="center">***</el-table-column>
            <el-table-column prop="lastGrabResult" label="上次抓取结果" align="center" width="110">
                <template slot-scope="scope">
                    <span>{{ scope.row.lastGrabResult ? '成功' : '失败' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="130">
                <template slot-scope="{row}">
                    <el-button size="mini" type="text" @click="handleEdit(row)">编辑</el-button>
                    <el-button size="mini" type="text" style="color:#f56c6c" @click="handleDeleate(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="isEdit ? '编辑' : '新增'" :visible.sync="DialogShow" width="620px" @close="resetForm">
            <el-form ref="Form" :model="form" label-width="160px" :rules="Rules">
                <el-form-item label="数据库类型" prop="dbType">
                    <commonSelect v-model="form.dbType" style="width: 100%;"
                        :list="[{ id: 'SQL Server', name: 'SQL Server' }]" :placeholder="'请选择'" :clearable="false">
                    </commonSelect>
                </el-form-item>
                <el-form-item label="数据库IP或电脑名" prop="dbIP">
                    <el-input v-model="form.dbIP"></el-input>
                </el-form-item>
                <el-form-item label="数据库端口(通常为空)" prop="dbPort">
                    <el-input v-model="form.dbPort"></el-input>
                </el-form-item>
                <el-form-item label="实例名" prop="instanceName">
                    <el-input v-model="form.instanceName"></el-input>
                </el-form-item>
                <el-form-item label="数据库名" prop="dbName">
                    <el-input v-model="form.dbName"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="userPwd">
                    <el-input v-model="form.userPwd" type="password" autocomplete="new-password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancelConfig()">取 消</el-button>
                <el-button type="primary" @click="isEdit ? handleUpdateConfig() : handleAddConfig()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { FeachGetFujidbType, FeachFujidbConfig, FeachFujidbDBInfoAdd, FeachFujidbDBInfoUpdate, FeachFujidbDBInfoDel } from '@/network/linemachine'

import commonSelect from '@/components/commonSelect.vue';
export default {
    name: '',
    props: {},
    components: {
        commonSelect
    },
    data() {
        return {
            lastGrabTime: '',
            lastGrabStatus: '',
            formInline: {
                grabInterval: '',
                enable: false
            },
            form: {
                dbType: 'SQL Server',
                dbIP: '',
                dbPort: '',
                instanceName: '',
                dbName: '',
                userName: '',
                userPwd: ''
            },
            Rules: {

            },
            isEdit: false,
            tableData: [],
            DialogShow: false
        }
    },
    mounted() {
        this.getFujidbCrabData()
    },
    methods: {
        async getFujidbCrabData() {
            try {
                const res = await FeachGetFujidbType()
                this.lastGrabTime = res.data.lastGrabTime
                this.lastGrabStatus = res.data.lastGrabStatus
                this.formInline.grabInterval = res.data.grabInterval
                this.formInline.enable = res.data.enable
                this.tableData = res.data.grabResultInfo
            } catch (error) {
                console.log(error)
            }
        },
        handleEdit(row) {
            this.form = row
            this.isEdit = true
            this.DialogShow = true
        },
        async handleDeleate(row) {
            try {
                await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });

                const res = await FeachFujidbDBInfoDel(row.id)
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getFujidbCrabData();
                }
            } catch (error) {
                console.log(error);
            }
        },
        handleAdd() {
            this.form = {
                dbType: 'SQL Server',
                dbIP: '',
                dbPort: '',
                instanceName: '',
                dbName: '',
                userName: '',
                userPwd: ''
            }
            this.isEdit = false
            this.DialogShow = true
        },
        async handleAddConfig() {
            try {
                await this.$refs['Form'].validate()
                const res = await FeachFujidbDBInfoAdd(this.form)
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '新增成功!'
                    });
                    this.form = {
                        dbType: 'SQL Server',
                        dbIP: '',
                        dbPort: '',
                        instanceName: '',
                        dbName: '',
                        userName: '',
                        userPwd: ''
                    }
                }
            } catch (error) {
                console.log(error);
            }
        },
        async handleUpdateConfig() {
            try {
                await this.$refs['Form'].validate()
                const res = await FeachFujidbDBInfoUpdate(this.form)
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                }
            } catch (error) {
                console.log(error);
            }
        },
        async handleSave() {
            try {
                await this.$refs['cfgForm'].validate()
                const res = await FeachFujidbConfig(this.formInline)
                console.log(res);
                if (res.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                }
                else {
                    this.getFujidbCrabData();
                }
            } catch (error) {
                console.log(error);
            }
        },
        headerStyleEvent() {
            return { background: '#eef1f6', color: '#606266' }
        },
        resetForm() {
            this.$refs['Form'].resetFields();
            this.getFujidbCrabData();
        },
        handleCancelConfig() {
            this.DialogShow = false;
        }
    }
}
</script>

<style scoped>
.tab-content {
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.grab-time,
.grab-status {
    font-size: 14px;
    margin: 8px 0;
    color: #333;
}

.grab-time span,
.grab-status span {
    font-weight: bold;
    color: #409eff;
}

.demo-form-inline {
    margin-top: 20px;
}

.form-item {
    margin-bottom: 15px;
    font-size: 14px;
    color: #555;
}
</style>
